<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>ClickOutSide | Vben Admin</title>
    <meta name="description" content="一个开箱即用的前端框架" />
    <link rel="stylesheet" href="/doc-next/assets/style.ffd1e42f.css" />
    <link rel="modulepreload" href="/doc-next/assets/Home.43e6fab2.js" />
    <link rel="modulepreload" href="/doc-next/assets/app.9ea9a1e7.js" />
    <link
      rel="modulepreload"
      href="/doc-next/assets/components_click-out-side.md.88043de3.lean.js"
    />
    <link rel="modulepreload" href="/doc-next/assets/app.9ea9a1e7.js" />
    <meta name="author" content="Vbenjs Team" />
    <meta name="keywords" content="vben, vitejs, vite, ant-design-vue, vue" />
    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
    />
    <meta name="keywords" content="vue vben admin docs" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="twitter:title" content="ClickOutSide | Vben Admin" />
    <meta property="og:title" content="ClickOutSide | Vben Admin" />
  </head>
  <body>
    <div id="app"
      ><!--[--><div class="theme"
        ><header class="nav-bar" data-v-172e455d
          ><div class="sidebar-button" data-v-172e455d
            ><svg
              class="icon"
              xmlns="http://www.w3.org/2000/svg"
              aria-hidden="true"
              role="img"
              viewBox="0 0 448 512"
            >
              <path
                fill="currentColor"
                d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"
                class
              ></path></svg></div
          ><a
            class="nav-bar-title"
            href="/doc-next/"
            aria-label="Vben Admin, back to home"
            data-v-172e455d
            data-v-dc837cb8
            ><img class="logo" src="/doc-next/logo.png" alt="Logo" data-v-dc837cb8 /> Vben Admin</a
          ><div class="flex-grow" data-v-172e455d></div
          ><div class="nav" data-v-172e455d
            ><nav class="nav-links" data-v-172e455d data-v-0cf770ed
              ><!--[--><div class="item" data-v-0cf770ed
                ><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792
                  ><button class="button" data-v-d0aba792
                    ><span class="button-text" data-v-d0aba792>指南</span
                    ><span class="right button-arrow" data-v-d0aba792></span></button
                  ><ul class="dialog" data-v-d0aba792
                    ><!--[--><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a class="item" href="/doc-next/guide/introduction" data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>指南</span
                          ><span class="icon" data-v-5354c4e6><!----></span></a
                        ></div
                      ></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a class="item" href="/doc-next/dep/icon" data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>深入</span
                          ><span class="icon" data-v-5354c4e6><!----></span></a
                        ></div
                      ></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a class="item" href="/doc-next/other/faq" data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>其他</span
                          ><span class="icon" data-v-5354c4e6><!----></span></a
                        ></div
                      ></li
                    ><!--]--></ul
                  ></div
                ></div
              ><div class="item" data-v-0cf770ed
                ><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792
                  ><button class="button" data-v-d0aba792
                    ><span class="button-text" data-v-d0aba792>组件</span
                    ><span class="right button-arrow" data-v-d0aba792></span></button
                  ><ul class="dialog" data-v-d0aba792
                    ><!--[--><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a class="item" href="/doc-next/components/introduction" data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>介绍</span
                          ><span class="icon" data-v-5354c4e6><!----></span></a
                        ></div
                      ></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a class="item" href="/doc-next/components/glob/button" data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>全局组件</span
                          ><span class="icon" data-v-5354c4e6><!----></span></a
                        ></div
                      ></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a class="item" href="/doc-next/components/basic" data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>常用组件</span
                          ><span class="icon" data-v-5354c4e6><!----></span></a
                        ></div
                      ></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a
                          class="item"
                          href="/doc-next/components/functional/context-menu"
                          data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>函数式组件</span
                          ><span class="icon" data-v-5354c4e6><!----></span></a
                        ></div
                      ></li
                    ><!--]--></ul
                  ></div
                ></div
              ><div class="item" data-v-0cf770ed
                ><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792
                  ><button class="button" data-v-d0aba792
                    ><span class="button-text" data-v-d0aba792>相关链接</span
                    ><span class="right button-arrow" data-v-d0aba792></span></button
                  ><ul class="dialog" data-v-d0aba792
                    ><!--[--><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a
                          class="item isExternal"
                          href="https://discord.gg/8GuAdwDhj6"
                          target="_blank"
                          rel="noopener noreferrer"
                          data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>Discord Chat</span
                          ><span class="icon" data-v-5354c4e6
                            ><svg
                              class="icon outbound"
                              xmlns="http://www.w3.org/2000/svg"
                              aria-hidden="true"
                              x="0px"
                              y="0px"
                              viewbox="0 0 100 100"
                              width="15"
                              height="15"
                              data-v-5354c4e6
                            >
                              <path
                                fill="currentColor"
                                d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                              ></path>
                              <polygon
                                fill="currentColor"
                                points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                              ></polygon></svg></span></a></div></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a
                          class="item isExternal"
                          href="https://vvbin.cn/next"
                          target="_blank"
                          rel="noopener noreferrer"
                          data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>完整版预览</span
                          ><span class="icon" data-v-5354c4e6
                            ><svg
                              class="icon outbound"
                              xmlns="http://www.w3.org/2000/svg"
                              aria-hidden="true"
                              x="0px"
                              y="0px"
                              viewbox="0 0 100 100"
                              width="15"
                              height="15"
                              data-v-5354c4e6
                            >
                              <path
                                fill="currentColor"
                                d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                              ></path>
                              <polygon
                                fill="currentColor"
                                points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                              ></polygon></svg></span></a></div></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a
                          class="item isExternal"
                          href="https://github.com/anncwb/vue-vben-admin"
                          target="_blank"
                          rel="noopener noreferrer"
                          data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>完整版源码</span
                          ><span class="icon" data-v-5354c4e6
                            ><svg
                              class="icon outbound"
                              xmlns="http://www.w3.org/2000/svg"
                              aria-hidden="true"
                              x="0px"
                              y="0px"
                              viewbox="0 0 100 100"
                              width="15"
                              height="15"
                              data-v-5354c4e6
                            >
                              <path
                                fill="currentColor"
                                d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                              ></path>
                              <polygon
                                fill="currentColor"
                                points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                              ></polygon></svg></span></a></div></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a
                          class="item isExternal"
                          href="https://vvbin.cn/thin/next"
                          target="_blank"
                          rel="noopener noreferrer"
                          data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>精简版预览</span
                          ><span class="icon" data-v-5354c4e6
                            ><svg
                              class="icon outbound"
                              xmlns="http://www.w3.org/2000/svg"
                              aria-hidden="true"
                              x="0px"
                              y="0px"
                              viewbox="0 0 100 100"
                              width="15"
                              height="15"
                              data-v-5354c4e6
                            >
                              <path
                                fill="currentColor"
                                d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                              ></path>
                              <polygon
                                fill="currentColor"
                                points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                              ></polygon></svg></span></a></div></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a
                          class="item isExternal"
                          href="https://github.com/anncwb/vben-admin-thin-next"
                          target="_blank"
                          rel="noopener noreferrer"
                          data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>精简版源码</span
                          ><span class="icon" data-v-5354c4e6
                            ><svg
                              class="icon outbound"
                              xmlns="http://www.w3.org/2000/svg"
                              aria-hidden="true"
                              x="0px"
                              y="0px"
                              viewbox="0 0 100 100"
                              width="15"
                              height="15"
                              data-v-5354c4e6
                            >
                              <path
                                fill="currentColor"
                                d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                              ></path>
                              <polygon
                                fill="currentColor"
                                points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                              ></polygon></svg></span></a></div></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a
                          class="item isExternal"
                          href="https://github.com/anncwb/vue-vben-admin-doc"
                          target="_blank"
                          rel="noopener noreferrer"
                          data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>文档源码</span
                          ><span class="icon" data-v-5354c4e6
                            ><svg
                              class="icon outbound"
                              xmlns="http://www.w3.org/2000/svg"
                              aria-hidden="true"
                              x="0px"
                              y="0px"
                              viewbox="0 0 100 100"
                              width="15"
                              height="15"
                              data-v-5354c4e6
                            >
                              <path
                                fill="currentColor"
                                d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                              ></path>
                              <polygon
                                fill="currentColor"
                                points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                              ></polygon></svg></span></a></div></li
                    ><li class="dialog-item" data-v-d0aba792
                      ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                        ><a
                          class="item isExternal"
                          href="https://github.com/anncwb/vue-vben-admin/blob/main/CHANGELOG.md"
                          target="_blank"
                          rel="noopener noreferrer"
                          data-v-5354c4e6
                          ><span class="arrow" data-v-5354c4e6></span
                          ><span class="text" data-v-5354c4e6>更新日志</span
                          ><span class="icon" data-v-5354c4e6
                            ><svg
                              class="icon outbound"
                              xmlns="http://www.w3.org/2000/svg"
                              aria-hidden="true"
                              x="0px"
                              y="0px"
                              viewbox="0 0 100 100"
                              width="15"
                              height="15"
                              data-v-5354c4e6
                            >
                              <path
                                fill="currentColor"
                                d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                              ></path>
                              <polygon
                                fill="currentColor"
                                points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                              ></polygon></svg></span></a></div></li
                    ><!--]--></ul
                  ></div
                ></div
              ><div class="item" data-v-0cf770ed
                ><div class="nav-link" data-v-0cf770ed data-v-5d86132c
                  ><a class="item" href="/doc-next/other/donate" data-v-5d86132c
                    >赞助
                    <!----></a
                  ></div
                ></div
              ><!--]--><!----><!-- <div v-if="repo" class="item">
      <NavLink :item="repo" />
    </div> --></nav
            ></div
          ><div class="nav-icons" data-v-172e455d
            ><div class="item" data-v-172e455d
              ><button class="nav-btn" aria-label="Toggle Theme" data-v-172e455d
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="1.2em"
                  height="1.2em"
                  preserveaspectratio="xMidYMid meet"
                  viewbox="0 0 24 24"
                  style="display: none"
                >
                  <path
                    d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938A7.999 7.999 0 0 0 4 12z"
                    fill="currentColor"
                  ></path></svg
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="1.2em"
                  height="1.2em"
                  preserveaspectratio="xMidYMid meet"
                  viewbox="0 0 24 24"
                  style=""
                >
                  <path
                    d="M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8a4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636L5.636 7.05L3.515 4.93zM16.95 18.364l1.414-1.414l2.121 2.121l-1.414 1.414l-2.121-2.121zm2.121-14.85l1.414 1.415l-2.121 2.121l-1.414-1.414l2.121-2.121zM5.636 16.95l1.414 1.414l-2.121 2.121l-1.414-1.414l2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"
                    fill="currentColor"
                  ></path></svg></button></div
            ><div class="item" data-v-172e455d
              ><a
                class="nav-btn"
                href="https://github.com/anncwb/vue-vben-admin"
                target="_blank"
                aria-label="View GitHub Repo"
                data-v-172e455d
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="1.2em"
                  height="1.2em"
                  preserveaspectratio="xMidYMid meet"
                  viewbox="0 0 24 24"
                  data-v-172e455d
                >
                  <path
                    d="M5.883 18.653c-.3-.2-.558-.455-.86-.816a50.32 50.32 0 0 1-.466-.579c-.463-.575-.755-.84-1.057-.949a1 1 0 0 1 .676-1.883c.752.27 1.261.735 1.947 1.588c-.094-.117.34.427.433.539c.19.227.33.365.44.438c.204.137.587.196 1.15.14c.023-.382.094-.753.202-1.095C5.38 15.31 3.7 13.396 3.7 9.64c0-1.24.37-2.356 1.058-3.292c-.218-.894-.185-1.975.302-3.192a1 1 0 0 1 .63-.582c.081-.024.127-.035.208-.047c.803-.123 1.937.17 3.415 1.096A11.731 11.731 0 0 1 12 3.315c.912 0 1.818.104 2.684.308c1.477-.933 2.613-1.226 3.422-1.096c.085.013.157.03.218.05a1 1 0 0 1 .616.58c.487 1.216.52 2.297.302 3.19c.691.936 1.058 2.045 1.058 3.293c0 3.757-1.674 5.665-4.642 6.392c.125.415.19.879.19 1.38a300.492 300.492 0 0 1-.012 2.716a1 1 0 0 1-.019 1.958c-1.139.228-1.983-.532-1.983-1.525l.002-.446l.005-.705c.005-.708.007-1.338.007-1.998c0-.697-.183-1.152-.425-1.36c-.661-.57-.326-1.655.54-1.752c2.967-.333 4.337-1.482 4.337-4.66c0-.955-.312-1.744-.913-2.404a1 1 0 0 1-.19-1.045c.166-.414.237-.957.096-1.614l-.01.003c-.491.139-1.11.44-1.858.949a1 1 0 0 1-.833.135A9.626 9.626 0 0 0 12 5.315c-.89 0-1.772.119-2.592.35a1 1 0 0 1-.83-.134c-.752-.507-1.374-.807-1.868-.947c-.144.653-.073 1.194.092 1.607a1 1 0 0 1-.189 1.045C6.016 7.89 5.7 8.694 5.7 9.64c0 3.172 1.371 4.328 4.322 4.66c.865.097 1.201 1.177.544 1.748c-.192.168-.429.732-.429 1.364v3.15c0 .986-.835 1.725-1.96 1.528a1 1 0 0 1-.04-1.962v-.99c-.91.061-1.662-.088-2.254-.485z"
                    fill="currentColor"
                  ></path></svg></a></div></div
          ><!--[--><!--]--></header
        ><!--[--><aside class="sidebar" data-v-3e48a26e
          ><nav class="nav-links nav" data-v-3e48a26e data-v-0cf770ed
            ><!--[--><div class="item" data-v-0cf770ed
              ><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792
                ><button class="button" data-v-d0aba792
                  ><span class="button-text" data-v-d0aba792>指南</span
                  ><span class="right button-arrow" data-v-d0aba792></span></button
                ><ul class="dialog" data-v-d0aba792
                  ><!--[--><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a class="item" href="/doc-next/guide/introduction" data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>指南</span
                        ><span class="icon" data-v-5354c4e6><!----></span></a
                      ></div
                    ></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a class="item" href="/doc-next/dep/icon" data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>深入</span
                        ><span class="icon" data-v-5354c4e6><!----></span></a
                      ></div
                    ></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a class="item" href="/doc-next/other/faq" data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>其他</span
                        ><span class="icon" data-v-5354c4e6><!----></span></a
                      ></div
                    ></li
                  ><!--]--></ul
                ></div
              ></div
            ><div class="item" data-v-0cf770ed
              ><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792
                ><button class="button" data-v-d0aba792
                  ><span class="button-text" data-v-d0aba792>组件</span
                  ><span class="right button-arrow" data-v-d0aba792></span></button
                ><ul class="dialog" data-v-d0aba792
                  ><!--[--><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a class="item" href="/doc-next/components/introduction" data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>介绍</span
                        ><span class="icon" data-v-5354c4e6><!----></span></a
                      ></div
                    ></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a class="item" href="/doc-next/components/glob/button" data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>全局组件</span
                        ><span class="icon" data-v-5354c4e6><!----></span></a
                      ></div
                    ></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a class="item" href="/doc-next/components/basic" data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>常用组件</span
                        ><span class="icon" data-v-5354c4e6><!----></span></a
                      ></div
                    ></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a
                        class="item"
                        href="/doc-next/components/functional/context-menu"
                        data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>函数式组件</span
                        ><span class="icon" data-v-5354c4e6><!----></span></a
                      ></div
                    ></li
                  ><!--]--></ul
                ></div
              ></div
            ><div class="item" data-v-0cf770ed
              ><div class="nav-dropdown-link" data-v-0cf770ed data-v-d0aba792
                ><button class="button" data-v-d0aba792
                  ><span class="button-text" data-v-d0aba792>相关链接</span
                  ><span class="right button-arrow" data-v-d0aba792></span></button
                ><ul class="dialog" data-v-d0aba792
                  ><!--[--><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a
                        class="item isExternal"
                        href="https://discord.gg/8GuAdwDhj6"
                        target="_blank"
                        rel="noopener noreferrer"
                        data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>Discord Chat</span
                        ><span class="icon" data-v-5354c4e6
                          ><svg
                            class="icon outbound"
                            xmlns="http://www.w3.org/2000/svg"
                            aria-hidden="true"
                            x="0px"
                            y="0px"
                            viewbox="0 0 100 100"
                            width="15"
                            height="15"
                            data-v-5354c4e6
                          >
                            <path
                              fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                            ></path>
                            <polygon
                              fill="currentColor"
                              points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                            ></polygon></svg></span></a></div></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a
                        class="item isExternal"
                        href="https://vvbin.cn/next"
                        target="_blank"
                        rel="noopener noreferrer"
                        data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>完整版预览</span
                        ><span class="icon" data-v-5354c4e6
                          ><svg
                            class="icon outbound"
                            xmlns="http://www.w3.org/2000/svg"
                            aria-hidden="true"
                            x="0px"
                            y="0px"
                            viewbox="0 0 100 100"
                            width="15"
                            height="15"
                            data-v-5354c4e6
                          >
                            <path
                              fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                            ></path>
                            <polygon
                              fill="currentColor"
                              points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                            ></polygon></svg></span></a></div></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a
                        class="item isExternal"
                        href="https://github.com/anncwb/vue-vben-admin"
                        target="_blank"
                        rel="noopener noreferrer"
                        data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>完整版源码</span
                        ><span class="icon" data-v-5354c4e6
                          ><svg
                            class="icon outbound"
                            xmlns="http://www.w3.org/2000/svg"
                            aria-hidden="true"
                            x="0px"
                            y="0px"
                            viewbox="0 0 100 100"
                            width="15"
                            height="15"
                            data-v-5354c4e6
                          >
                            <path
                              fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                            ></path>
                            <polygon
                              fill="currentColor"
                              points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                            ></polygon></svg></span></a></div></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a
                        class="item isExternal"
                        href="https://vvbin.cn/thin/next"
                        target="_blank"
                        rel="noopener noreferrer"
                        data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>精简版预览</span
                        ><span class="icon" data-v-5354c4e6
                          ><svg
                            class="icon outbound"
                            xmlns="http://www.w3.org/2000/svg"
                            aria-hidden="true"
                            x="0px"
                            y="0px"
                            viewbox="0 0 100 100"
                            width="15"
                            height="15"
                            data-v-5354c4e6
                          >
                            <path
                              fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                            ></path>
                            <polygon
                              fill="currentColor"
                              points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                            ></polygon></svg></span></a></div></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a
                        class="item isExternal"
                        href="https://github.com/anncwb/vben-admin-thin-next"
                        target="_blank"
                        rel="noopener noreferrer"
                        data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>精简版源码</span
                        ><span class="icon" data-v-5354c4e6
                          ><svg
                            class="icon outbound"
                            xmlns="http://www.w3.org/2000/svg"
                            aria-hidden="true"
                            x="0px"
                            y="0px"
                            viewbox="0 0 100 100"
                            width="15"
                            height="15"
                            data-v-5354c4e6
                          >
                            <path
                              fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                            ></path>
                            <polygon
                              fill="currentColor"
                              points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                            ></polygon></svg></span></a></div></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a
                        class="item isExternal"
                        href="https://github.com/anncwb/vue-vben-admin-doc"
                        target="_blank"
                        rel="noopener noreferrer"
                        data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>文档源码</span
                        ><span class="icon" data-v-5354c4e6
                          ><svg
                            class="icon outbound"
                            xmlns="http://www.w3.org/2000/svg"
                            aria-hidden="true"
                            x="0px"
                            y="0px"
                            viewbox="0 0 100 100"
                            width="15"
                            height="15"
                            data-v-5354c4e6
                          >
                            <path
                              fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                            ></path>
                            <polygon
                              fill="currentColor"
                              points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                            ></polygon></svg></span></a></div></li
                  ><li class="dialog-item" data-v-d0aba792
                    ><div class="nav-dropdown-link-item" data-v-d0aba792 data-v-5354c4e6
                      ><a
                        class="item isExternal"
                        href="https://github.com/anncwb/vue-vben-admin/blob/main/CHANGELOG.md"
                        target="_blank"
                        rel="noopener noreferrer"
                        data-v-5354c4e6
                        ><span class="arrow" data-v-5354c4e6></span
                        ><span class="text" data-v-5354c4e6>更新日志</span
                        ><span class="icon" data-v-5354c4e6
                          ><svg
                            class="icon outbound"
                            xmlns="http://www.w3.org/2000/svg"
                            aria-hidden="true"
                            x="0px"
                            y="0px"
                            viewbox="0 0 100 100"
                            width="15"
                            height="15"
                            data-v-5354c4e6
                          >
                            <path
                              fill="currentColor"
                              d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                            ></path>
                            <polygon
                              fill="currentColor"
                              points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                            ></polygon></svg></span></a></div></li
                  ><!--]--></ul
                ></div
              ></div
            ><div class="item" data-v-0cf770ed
              ><div class="nav-link" data-v-0cf770ed data-v-5d86132c
                ><a class="item" href="/doc-next/other/donate" data-v-5d86132c
                  >赞助
                  <!----></a
                ></div
              ></div
            ><!--]--><!----><!-- <div v-if="repo" class="item">
      <NavLink :item="repo" />
    </div> --></nav
          ><!--[--><!--]--><ul class="sidebar-links" data-v-3e48a26e
            ><!--[--><li class="sidebar-link"
              ><p class="sidebar-link-item">组件</p
              ><ul class="sidebar-links"
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/introduction">前言</a
                  ><!----></li
                ></ul
              ></li
            ><li class="sidebar-link"
              ><p class="sidebar-link-item">全局组件</p
              ><ul class="sidebar-links"
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/glob/button">Button</a
                  ><!----></li
                ></ul
              ></li
            ><li class="sidebar-link"
              ><p class="sidebar-link-item">常用组件</p
              ><ul class="sidebar-links"
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/basic">Basic</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/page">Page</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/icon">Icon</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/auth">Authority</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/form">Form</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/table">Table</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/pop-confirm-button"
                    >PopConfirmButton</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/collapse-container"
                    >CollapseContainer</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/scroll-container"
                    >ScrollContainer</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/lazy-container"
                    >LazyContainer</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/code-editor"
                    >CodeEditor</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/json-preview"
                    >JsonPreview</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/count-down">CountDown</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item active" href="/doc-next/components/click-out-side"
                    >ClickOutSide</a
                  ><ul class="sidebar-links"
                    ><li class="sidebar-link"
                      ><a class="sidebar-link-item" href="#usage">Usage</a
                      ><!----></li
                    ><li class="sidebar-link"
                      ><a class="sidebar-link-item" href="#events">Events</a
                      ><!----></li
                    ><li class="sidebar-link"
                      ><a class="sidebar-link-item" href="#slots">Slots</a
                      ><!----></li
                    ></ul
                  ></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/count-to">CountTo</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/cropper">Cropper</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/desc">Description</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/drawer">Drawer</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/modal">Modal</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/flow-chart">FlowChart</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/upload">Upload</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/tree">Tree</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/excel">Excel</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/qrcode">Qrcode</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/markdown">Markdown</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/loading">Loading</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/tinymce">Tinymce</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/time">Time</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/strength-meter"
                    >StrengthMeter</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/verify">Verify</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/transition">Transition</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/virtual-scroll"
                    >VirtualScroll</a
                  ><!----></li
                ></ul
              ></li
            ><li class="sidebar-link"
              ><p class="sidebar-link-item">函数式组件</p
              ><ul class="sidebar-links"
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/functional/context-menu"
                    >ContextMenu</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/functional/loading"
                    >Loading</a
                  ><!----></li
                ><li class="sidebar-link"
                  ><a class="sidebar-link-item" href="/doc-next/components/functional/preview"
                    >Preview</a
                  ><!----></li
                ></ul
              ></li
            ><!--]--></ul
          ><!--[--><!--]--></aside
        ><!-- <Slugs /> --><!--]--><!-- TODO: make this button accessible --><div
          class="sidebar-mask"
        ></div
        ><main class="page" data-v-4c107763
          ><div class="container" data-v-4c107763
            ><!--[--><!--]--><div class="content" data-v-4c107763
              ><div data-v-4c107763
                ><h1 id="clickoutside"
                  ><a class="header-anchor" href="#clickoutside" aria-hidden="true">#</a>
                  ClickOutSide</h1
                ><p>用于监听包裹的元素点击外部触发事件</p
                ><h2 id="usage"
                  ><a class="header-anchor" href="#usage" aria-hidden="true">#</a> Usage</h2
                ><div class="language-vue">
                  <pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ClickOutSide</span> <span class="token attr-name">@clickOutside</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; (showRef.value = false)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>() =&gt; (showRef.value = true)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        {{ showRef ? &#39;鼠标点击那部（点击边框外可以恢复）&#39; : &#39;点击该区域状态(初始状态)&#39; }}
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ClickOutSide</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> ClickOutSide <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@/components/ClickOutSide/index.vue&#39;</span><span class="token punctuation">;</span>
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    components<span class="token operator">:</span> <span class="token punctuation">{</span> ClickOutSide <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> showRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        showRef<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div
                ><h2 id="events"
                  ><a class="header-anchor" href="#events" aria-hidden="true">#</a> Events</h2
                ><table
                  ><thead
                    ><tr><th>事件</th><th>回调参数</th><th>说明</th></tr></thead
                  ><tbody
                    ><tr
                      ><td>clickOutside</td><td><code>()=&gt;void</code></td
                      ><td>点击包裹元素外部区域触发</td></tr
                    ></tbody
                  ></table
                ><h2 id="slots"
                  ><a class="header-anchor" href="#slots" aria-hidden="true">#</a> Slots</h2
                ><table
                  ><thead
                    ><tr><th>名称</th><th>说明</th></tr></thead
                  ><tbody
                    ><tr><td>default</td><td>被包裹的元素</td></tr></tbody
                  ></table
                ></div
              ></div
            ><footer class="page-footer" data-v-4c107763 data-v-ddc19c16
              ><div class="edit" data-v-ddc19c16
                ><div class="edit-link" data-v-ddc19c16 data-v-5c10c4bc
                  ><a
                    class="link"
                    href="https://github.com/anncwb/vue-vben-admin-doc/edit/main/components/click-out-side.md"
                    target="_blank"
                    rel="noopener noreferrer"
                    data-v-5c10c4bc
                    >为此页提供修改建议
                    <svg
                      class="icon outbound icon"
                      xmlns="http://www.w3.org/2000/svg"
                      aria-hidden="true"
                      x="0px"
                      y="0px"
                      viewbox="0 0 100 100"
                      width="15"
                      height="15"
                      data-v-5c10c4bc
                    >
                      <path
                        fill="currentColor"
                        d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
                      ></path>
                      <polygon
                        fill="currentColor"
                        points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
                      ></polygon></svg></a></div></div
              ><div class="updated" data-v-ddc19c16><!----></div></footer
            ><div class="next-and-prev-link" data-v-4c107763 data-v-0002a634
              ><div class="container" data-v-0002a634
                ><div class="prev" data-v-0002a634
                  ><a class="link" href="/doc-next/components/count-down" data-v-0002a634
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewbox="0 0 24 24"
                      class="icon icon-prev"
                      data-v-0002a634
                    >
                      <path
                        d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"
                      ></path></svg
                    ><span class="text" data-v-0002a634>CountDown</span></a
                  ></div
                ><div class="next" data-v-0002a634
                  ><a class="link" href="/doc-next/components/count-to" data-v-0002a634
                    ><span class="text" data-v-0002a634>CountTo</span
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewbox="0 0 24 24"
                      class="icon icon-next"
                      data-v-0002a634
                    >
                      <path
                        d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"
                      ></path></svg></a></div></div></div
            ><!--[--><!--]--></div
          ></main
        ></div
      ><!----><!--]--></div
    >
    <script>
      __VP_HASH_MAP__ = JSON.parse(
        '{"index.md":"2734edcc","readme.md":"e1519bf2","dep_cors.md":"204fc85f","dep_dark.md":"43a11d42","dep_i18n.md":"a802b766","dep_icon.md":"439f8e1c","dep_lint.md":"e8646b9e","components_auth.md":"b02963b8","components_basic.md":"fca49067","components_click-out-side.md":"88043de3","components_code-editor.md":"6afcba77","components_collapse-container.md":"b2928273","components_count-down.md":"c92778a4","components_count-to.md":"c17f243c","components_cropper.md":"4a855951","components_desc.md":"44431141","components_drawer.md":"f8ba528e","components_excel.md":"d99f9b91","components_flow-chart.md":"edffb78e","components_form.md":"047930e8","components_icon.md":"0ffa2e82","components_introduction.md":"7cb286c9","components_json-preview.md":"c1dd06c0","components_lazy-container.md":"60c806dc","components_loading.md":"06300eaf","components_markdown.md":"0c696756","components_modal.md":"135caed7","components_page.md":"28a90d66","components_pop-confirm-button.md":"c26f7c65","components_qrcode.md":"dac7ed30","components_scroll-container.md":"1dffa01f","components_strength-meter.md":"d8a0e073","components_table.md":"9ffc20f8","components_time.md":"364e4fcd","components_tinymce.md":"27726c6d","components_transition.md":"1c742571","components_tree.md":"9f313e94","components_upload.md":"5eaac62a","components_verify.md":"d40e7d3d","components_virtual-scroll.md":"9df7959b","guide_auth.md":"7bab7e41","guide_component.md":"35361b68","guide_deploy.md":"5e737a9c","guide_design.md":"12ad7145","guide_electron.md":"c05175be","guide_index.md":"773f5681","guide_introduction.md":"70896801","guide_lib.md":"f35e142b","guide_menu.md":"a61b3e0c","guide_mock.md":"7ad03e52","guide_router.md":"4af7d754","guide_settings.md":"15dd5414","other_donate.md":"a2bcdefe","other_doubt.md":"7d012b2e","other_faq.md":"e1457c01","other_server.md":"3adeb1fd","components_functional_context-menu.md":"c6c1cfd3","components_functional_loading.md":"b7278715","components_functional_preview.md":"90804e55","components_glob_button.md":"29118f06"}',
      );
    </script>
    <script type="module" async src="/doc-next/assets/app.9ea9a1e7.js"></script>
  </body>
</html>
